{% extends 'common/base.html' %}

{% load staticfiles %}
{% load server_filter %}

{#标题#}
{% block title %}宠安服务{% endblock title %}
{% block head_js %}
    <script src="{% static 'js/jquery-1.9.0.min.js' %}"></script>
<script src="{% static 'js/server.js' %}"></script>
{% endblock head_js %}

{#body主体#}
{% block body %}

<a href="{% url 'server:all' 0 %}"><img src="{% static 'images/server_bg.png' %}"></a>

<div class="main">
    <div class="wrap">
        <div class="about">
            <div class="about-top">
                <div class="col span_1_of_about">

                    <div class="bar_line">
                        <p>服务项目</p>
                    </div>

                    {% for t in types %}
                        {% if forloop.counter0|add_box %}
                            <div class="services-box">
                        {% endif %}

                        <div class="col_1_of_2 span_1_of_2">
                            <a href="{% url 'server:all' t.id %}">
                                <img src="{% static t.img %}" alt="" />
                                <p class="text1"><span class="project">{{ t.type }}</span><em class="pro_more">&nbsp;&nbsp;&nbsp;&nbsp;Read More&nbsp;&gt;&nbsp;&gt;</em></p>
                            </a>
                        </div>

                        {% if forloop.counter|add_box %}
                            <div class="clear"></div>
                            </div>
                        {% endif %}
                    {% endfor %}

                </div>

                <div class="col span_1_of_about1">

                    <div class="bar_line">
                        <p>服务预约</p>
                    </div>
                    <div class="sidebar-nav">

                       <form action="javascrapt:" method="post">
                           {% csrf_token %}
                           <div><span>* 预约项目：</span></div>

                            <select class="user_order">
                                <option value="0">--请选择--</option>
                                {% for t in types %}
                                <option value="{{ t.id }}">{{ t.type }}</option>
                                {% endfor %}
                            </select>
                           <p class="error_tip error_order">错误提示</p>
                            <p class="error_tip_python">{{ mess.error_order }}</p>

                           <div>* 联系人：</div>
                           <input class="user_name" type="text">
                            <p class="error_tip error_name">错误提示</p>
                            <p class="error_tip_python">{{ mess.error_name }}</p>

                           <div>* 手机号：</div>
                           <input class="user_tel" type="text">
                            <p class="error_tip error_tel">错误提示</p>
                            <p class="error_tip_python">{{ mess.error_tel }}</p>

                           <div>* 预约日期：</div>
                            <label>日期：</label>
                           <select class="user_time1">
                               <option value="0">--请选择--</option>
                           </select>
                            <br>
                            <label>时间：</label>
                           <select class="user_time2">
                               <option value="0">--请选择--</option>
                               <option value="08:00">08：00</option>
                               <option value="10:00">10：00</option>
                               <option value="12:00">12：00</option>
                               <option value="14:00">14：00</option>
                               <option value="16:00">18：00</option>
                               <option value="18:00">18：00</option>
                           </select>
                            <p class="error_tip error_time">错误提示</p>
                            <p class="error_tip_python">{{ mess.error_time }}</p>

                           <div>备注：</div>
                           <textarea class="user_msg"></textarea>
                            <input class="btn1" id="order_btn" style="margin-bottom: 3px" type="submit" value="提 交">
                            <p class="error_tip error_msg">错误提示</p>
                            <p class="error_tip_python">{{ mess.error_msg }}</p>

                       </form>
                    </div>

                    <div class="space_line"></div>
                    <div class="bar_line">
                        <p>预约热度</p>
                    </div>
                    <div class="poling">
                        {% for t in types %}
                        <div class="poll">
                            <div class="text2">{{ t.type }}</div>
                            <div class="percent">{{ t.per }}</div>
                            <div class="clear"></div>
                            <div class="skills">
                                <div style="width:{{ t.per }}"> </div>
                            </div>
                        </div>
                        {% endfor %}

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


{# 评论成功，弹框提示#}
<div class="pop_main" id="pop">
    <div class="pop_con">

        <div class="pop_title">×</div>

        <div class="pop_detail">
            <p class="pop_text">
                预约成功,谢谢您的支持！<br>
                我们会尽快联系您！
            </p>
        </div>

        <div class="pop_footer">
            还有<span id="count">5</span>秒自动关闭弹框
        </div>

    </div>
    <div class="mask"></div>
</div>

{% endblock body %}